import React, { useState, useEffect } from 'react';
import { Select, Input, Button, Tag, Space, Table, DatePicker } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import * as service from '../../../../api/salary.js'
import * as salary from '../../../../api/requestsalary.js'
import '../Archives/Archives.scss'
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import { Await } from 'react-router-dom';
dayjs.extend(customParseFormat);
const { Search } = Input;

function Archives(props: any) {
    var [archives, setArchives] = useState([])
    useEffect(() => {
        // salary.Employee_file({}).then((res) => { //后端数据请求员工薪资档案列表
        //     // console.log(res.data.data);
        //     res.data.data.map((item: any) => {
        //         item.key = item.id
        //     })
        //     setArchives(res.data.data)
        // })
        service.Employee_file({}).then((res) => { //模拟数据请求员工薪资档案列表
            console.log(res.data);
            res.data.map((item: any) => {
                item.key = item.id
            })
            setArchives(res.data)
        })
    }, [])
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
        id: string;
    }
    const columns: ColumnsType<DataType> = [
        {
            title: '员工',
            dataIndex: 'person',
            key: 'id',
        },
        {
            title: '工号',
            dataIndex: 'per_num',
            key: 'id',
        },
        {
            title: '部门',
            dataIndex: 'part',
            key: 'id',
        },
        {
            title: '职位',
            dataIndex: 'position',
            key: 'id',
        },
        {
            title: '工作类型',
            dataIndex: 'type',
            key: 'id',
        },
        {
            title: '员工状态',
            dataIndex: 'state',
            key: 'id',
        },
        {
            title: '固定工资(元)',
            dataIndex: 'fixed_salary',
            key: 'id',
        },
        {
            title: '岗位工资(元)',
            dataIndex: 'post_salary',
            key: 'id',
        },
        {
            title: '绩效工资(元)',
            dataIndex: 'achievements_salary',
            key: 'id',
        },
        {
            title: '总工资(元)',
            dataIndex: 'all_salary',
            key: 'id',
        },
        {
            title: '入职日期',
            dataIndex: 'come_time',
            key: 'id',
        },
        {
            title: '转正日期',
            dataIndex: 'go_time',
            key: 'id',
        },
        {
            title: '操作',
            key: 'tags',
            render: (_, record) => <a onClick={()=>{handleClick(record.id)}}>删除</a>
        },
    ];
    const data = archives
    var onSearch = (value: any) => { //关键词搜索
        service.Employee_search({ person: value }).then((res) => {
            console.log(res);
            setArchives(res.data)
        })
    }
    var handleChange1 = (value: any) => { //选择部门
        // console.log(value);
        service.Employee_bumen({ part: value }).then((res) => {
            // console.log(res);
            setArchives(res.data)
        })
    }
    var handleChange2 = (value: any) => { //选择职位
        // console.log(value);
        service.Employee_zhiwei({ position: value }).then((res) => {
            // console.log(res);
            setArchives(res.data)
        })
    }
    var handleChange3 = (value: any) => { //选择员工状态
        // console.log(value);
        service.Employee_zhaungtai({ type: value }).then((res) => {
            // console.log(res);
            setArchives(res.data)
        })
    }
    var handleClick = async (id: any) => { //删除单条薪资档案
        var res = await service.delete_file({ id })
        // console.log(res);
        service.Employee_file({}).then((res) => { //模拟数据请求员工薪资档案列表
            console.log(res.data);
            res.data.map((item: any) => {
                item.key = item.id
            })
            setArchives(res.data)
        })
    }
    return (
        <div className='archives'>
            <div className='archives-one'>
                <div className='archives-title-left'></div>
                <h4 className='archives-title'>员工薪资档案</h4>
            </div>
            <div className='archives-two'>
                <div className='archives-two-box'>
                    <span>部门</span>
                    <Select
                        placeholder="请选择"
                        style={{ width: 200 }}
                        onChange={(value) => { handleChange1(value) }}
                        options={[
                            { value: '产品部', label: '产品部' },
                            { value: '研发部', label: '研发部' }
                        ]}
                    />
                    <span>职位</span>
                    <Select
                        placeholder="请选择"
                        style={{ width: 220 }}
                        onChange={(value) => { handleChange2(value) }}
                        options={[
                            { value: '产品经理', label: '产品经理' },
                            { value: '设计主管', label: '设计主管' },
                            { value: '设计师', label: '设计师' },
                            { value: '前台', label: '前台' },
                        ]}
                    />
                    <span>员工状态</span>
                    <Select
                        placeholder="请选择"
                        style={{ width: 220 }}
                        onChange={(value) => { handleChange3(value) }}
                        options={[
                            { value: '在职', label: '在职' },
                            { value: '离职', label: '离职' }
                        ]}
                    />
                    <Search placeholder="请输入关键字" onSearch={(value) => { onSearch(value) }} style={{ width: 320 }} />
                </div>
                <Button type="primary" ghost style={{ height: 40 }}>导出</Button>
            </div>
            <Table columns={columns} dataSource={data} className='archives-three' />
        </div>
    );
}


export default Archives;